<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
        }

        .box .header,
        .footer {
            height: 100px;
            width: 1200px;
            background-color: springgreen;
            font-size: 80px;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        ul>li {
            width: 280px;
            height: 500px;
            border: 1px solid gray;
            margin-top: 10px;
        }

        img {
            width: 280px;
            height: 350px;
        }

        ul>li>p {
            padding: 0 10px;
        }

        .pagination {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination p {
            margin: 0 20px;
            width: 30px;
            height: 30px;
            background-color: springgreen;
            text-align: center;
            line-height: 30px;
            font-weight: 700;

            /* 添加小手的效果 */
            cursor: pointer;
        }

        .pagination p.disable {
            cursor: not-allowed;
            background-color: gray;
        }

        select {
            width: 50px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">头部</div>
        <div class="pagination">
            <p class="prev">&lt;</p>
            <span class="up">1</span>
            /
            <span class="down">4</span>
            <p class="next">&gt;</p>
            <select>
                <option value="4">4</option>
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="16">16</option>
            </select>
        </div>
        <div class="content">
            <ul>
                <li>
                    <img src="" alt="">
                    <p>2020西太湖国际应跃进</p>
                    <p>城市:常州</p>
                    <p>地址:常州席太平个地方回家看电视</p>
                    <p>价格:23323</p>
                    <p>演出时间:2022</p>
                </li>
            </ul>
        </div>
        <div class="footer">尾部</div>
    </div>
    <script src="./dm_list.js"></script>
    <script>
        //获取要点击的按钮
        var prevBtn = document.querySelector(".prev")
        var nextBtn = document.querySelector(".next")
        var select = document.querySelector("select")
        var down = document.querySelector(".down")
        var ul = document.querySelector("ul")
        var up = document.querySelector(".up")

        /* 
            第一页打开页面的时候,我要能看到的页面就是默认的装填
                var current =  3;
                var pageNum = 4;
            默认显示的数据状态
                第1页   一页显示4条     0~3
                第1页   一页显示8条     0~7
                第1页   一页显示12条    0~11
                第2页   一页显示4条     4~7
                第2页   一页显示8条     8~15
                第2页   一页显示12条    12~23
                第3页   一页显示4条     8~11
                第3页   一页显示8条     16~23
                第4页   一页显示4条     12~15
                x       y              (x-1)*y~(x*y-1)
            显示数据
        */
        //默认为第三页
        var current = 2;
        //默认一页显示4条
        var pageNum = 4;
        // 计算最后一页
        var lastPage = Math.ceil(list.length / pageNum);
        /* 
            点击上一页
                1. current--
        */
        prevBtn.onclick = function () {
            //如果当前页小于等于第一页,还有上一页,将上一页按钮禁用掉
            if (current <= 1) {
                prevBtn.classList.add("disable")
                return;
            }
            current--
            //重新渲染页面
            render();
        }
        /* 
            下一页
                current++
        */
        nextBtn.onclick = function () {
            //如果当前页为最后一页,那么禁用下一页的按钮
            if (current >= lastPage) {
                nextBtn.classList.add("disable")
                return;
            }
            current++
            /* 重新渲染视图 */
            render();
        }


        // 封装渲染数据
        function render() {
            //当前页,使用up来进行表示
            up.innerHTML = current;
            //尾页 = Math.ceil(总条数/一页显示的条数)
            down.innerHTML = lastPage
            //如果当前页是第一页,那么就禁用上一页的页面
            if (current === 1) {
                prevBtn.classList.add("disable")
            } else {
                prevBtn.classList.remove("disable")
            }
            //如果当前页是最后一页,那么就禁用下一页的按钮
            if (current === lastPage) {
                nextBtn.classList.add("disable")
            } else {
                nextBtn.classList.remove("disable")
            }

            var str = ""
            // list.slice(0,4)
            // 得到是第一页的渲染的数据
            var arr = list.slice((current - 1) * pageNum, (current * pageNum - 1 + 1))
            arr.forEach(function (item) {
                str += `
                    <li>
                        <img src="${item.pic}" alt="">
                        <p>${item.name}</p>
                        <p>城市:${item.city}</p>
                        <p>地址:${item.address}</p>
                        <p>价格:${item.price}</p>
                        <p>演出时间:${item.showTime}</p>
                    </li>
                `
            })
            ul.innerHTML = str;
        }
        render();
    </script>
</body>

</html>